<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-pre & v-cloak & v-once 案例</title>
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>

<body>
    <h1>v-pre & v-cloak & v-once案例</h1>
    <hr>
    <div id="app">
        <h1>V-pre</h1>
        <hr>
        <div v-pre>{{message}}</div>
        <h1>v-cloak</h1>
        <hr>
        <div v-cloak>
            {{ message }}
        </div>
        <h1>v-once指令</h1>
        <hr>
        <div v-once>第一次绑定的值：{{message}}</div>
        <div>
            <input type="text" v-model="message">
        </div>
    </div>


    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: "第一次消息",

            }
        })
    </script>
</body>

</html>